<template>
    <div class="search">
        <Card>
            <Row class="operation">
                <Button @click="add" icon="md-add" type="primary">添加客户端</Button>
                <Button @click="getClientList" icon="md-refresh">刷新</Button>
                <circleLoading v-if="operationLoading"/>
            </Row>
            <Row>
                <Alert show-icon type="warning">
                    请谨慎维护客户端，非开发人员请不要维护
                </Alert>
            </Row>
            <Row>
                <Table :columns="columns" :data="data" :loading="loading" border ref="table">
                    <template slot="action" slot-scope="{ row, index }">
                        <Button @click="edit(row)" size="small" style="margin-right:5px" type="primary">编辑</Button>
                        <Button @click="remove(row)" size="small" type="error">删除</Button>
                    </template>
                </Table>
            </Row>
            <Row class="page" justify="end" type="flex">
                <Page :current="pageNumber" :page-size="pageSize" :page-size-opts="[10,20,50]" :total="total"
                      @on-change="changePage" @on-page-size-change="changePageSize" show-elevator show-sizer
                      show-total size="small"></Page>
            </Row>
        </Card>
        <Modal :mask-closable='false' :styles="{top: '90px'}" :title="modalTitle" :width="500" v-model="modalVisible">
            <Form :label-width="100" :model="clientForm" :rules="clientFormValidate" ref="clientForm">
                <FormItem label="clientId" prop="clientId">
                    <Input autocomplete="off" :disabled="!clientIdEditable" v-model="clientForm.clientId"/>
                </FormItem>
                <FormItem label="clientSecret" prop="clientSecret">
                    <Input autocomplete="off" v-model="clientForm.clientSecret"/>
                </FormItem>
                <FormItem label="授权范围" prop="scope">
                    <Input autocomplete="off" v-model="clientForm.scope"/>
                </FormItem>
                <FormItem label="授权类型" prop="scope">
                    <Input autocomplete="off" v-model="clientForm.authorizedGrantTypes"/>
                </FormItem>
                <FormItem label="token有效时间" prop="accessTokenValidity">
                    <Input autocomplete="off" v-model="clientForm.accessTokenValidity"/>
                </FormItem>
                <FormItem label="刷新有效时间" prop="refreshTokenValidity">
                    <Input autocomplete="off" v-model="clientForm.refreshTokenValidity"/>
                </FormItem>
                <FormItem label="添加信息" prop="refreshTokenValidity">
                    <Input autocomplete="off" v-model="clientForm.additionalInformation"/>
                </FormItem>
                <FormItem label="自动放行" prop="autoapprove">
                    <i-switch v-model="clientForm.autoapprove"/>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button @click="cancelEdit" type="text">取消</Button>
                <Button :loading="submitLoading" @click="submitPost" type="primary">提交</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import {
        fetchList,
        addObj,
        delObj,
        putObj
    } from "@/projects/basic/api/admin/oauthclient";
    import circleLoading from "_c/circle-loading/circle-loading.vue";

    export default {
        name: "oauth_manage",
        components: {
            circleLoading
        },
        data() {
            return {
                loading: true,
                operationLoading: false,
                selectList: [],
                selectDate: null,
                modalVisible: false,
                modalTitle: "",
                clientIdEditable:true,
                clientForm: {
                    clientId: "",
                    clientSecret: "",
                    scope: "all",
                    authorizedGrantTypes: "password",
                    accessTokenValidity: 3600,
                    refreshTokenValidity: 7200,
                    additionalInformation: "",
                    autoapprove: true
                },
                clientFormValidate: {
                    clientId: [
                        {required: true, message: "clientId不能为空", trigger: "blur"}
                    ],
                    clientSecret: [
                        {required: true, message: "clientSecret不能为空", trigger: "blur"}
                    ],
                    authorizedGrantTypes: [
                        {required: true, message: "授权类型不能为空", trigger: "blur"}
                    ]
                },
                submitLoading: false,
                columns: [
                    {
                        key: "clientId",
                        title: "clientId",
                        fixed: "left"
                    },
                    {
                        title: "clientSecret",
                        key: "clientSecret",
                        fixed: "left"
                    },
                    {
                        title: "授权范围",
                        key: "scope",
                        fixed: "left",
                        ellipsis: true,
                        tooltip: true
                    },
                    {
                        title: "授权类型",
                        key: "authorizedGrantTypes",
                        tooltip: true
                    },
                    {
                        title: "token有效时间",
                        key: "accessTokenValidity"
                    },
                    {
                        title: "刷新有效时间",
                        key: "refreshTokenValidity"
                    },
                    {
                        title: "自动放行",
                        key: "autoapprove"
                    },
                    {
                        title: "操作",
                        key: "action",
                        width: 200,
                        align: "center",
                        fixed: "right",
                        slot: "action"
                    }
                ],
                data: [],
                total: 0,
                pageSize: 10,
                pageNumber: 1
            };
        },
        methods: {
            init() {
                this.getClientList();
            },
            changePage(v) {
                this.pageNumber = v;
                this.getClientList();
            },
            changePageSize(v) {
                this.pageSize = v;
                this.getClientList();
            },
            getClientList() {
                // 多条件搜索用户列表
                this.loading = true;
                fetchList(Object.assign({
                    current: this.pageNumber,
                    size: this.pageSize
                })).then(res => {
                    this.loading = false;
                    if (res.code === "0000") {
                        this.data = res.data.records;
                        this.total = res.data.total;
                    }
                });
            },
            cancelEdit() {
                this.modalVisible = false;
            },
            submitPost() {
                this.$refs.clientForm.validate(valid => {
                    if (valid) {
                        if (this.modalType === 0) {
                            this.submitLoading = true;
                            addObj(this.clientForm).then(res => {
                                this.submitLoading = false;
                                if (res.code === "0000") {
                                    this.$Message.success("操作成功");
                                    this.getClientList();
                                    this.modalVisible = false;
                                }
                            }).catch(() => {
                                this.submitLoading = false;
                            });
                        } else {
                            // 编辑
                            this.submitLoading = true;
                            putObj(this.clientForm).then(res => {
                                this.submitLoading = false;
                                if (res.code === "0000") {
                                    this.$Message.success("操作成功");
                                    this.getClientList();
                                    this.modalVisible = false;
                                }
                            }).catch(() => {
                                this.submitLoading = false;
                            });
                        }
                    }
                });
            },
            add() {
                this.modalType = 0;
                this.modalTitle = "添加客户端";
                this.$refs.clientForm.resetFields();
                this.modalVisible = true;
                this.clientIdEditable = true;
            },
            edit(v) {
                this.modalType = 1;
                this.modalTitle = "编辑客户端-" + v.clientId;
                this.$refs.clientForm.resetFields();
                let str = JSON.stringify(v);
                let clientInfo = JSON.parse(str);
                clientInfo.autoapprove = clientInfo.autoapprove === 'true';
                this.clientForm = clientInfo;
                this.clientIdEditable = false;
                this.modalVisible = true;
            },
            remove(v) {
                this.$Modal.confirm({
                    title: "确认删除",
                    content: "您确认要删除客户端 " + v.clientId + " ?",
                    onOk: () => {
                        this.operationLoading = true;
                        delObj(v.clientId).then(res => {
                            this.operationLoading = false;
                            if (res.code === "0000") {
                                this.$Message.success("删除成功");
                                this.getClientList();
                            }
                        }).catch(() => {
                            this.submitLoading = false;
                        });
                    }
                });
            }
        },
        mounted() {
            this.init();
        }
    };
</script>

<style lang="less">
    .search {
        .operation {
            margin-bottom: 2vh;
        }

        .select-count {
            font-size: 13px;
            font-weight: 600;
            color: #40a9ff;
        }

        .select-clear {
            margin-left: 10px;
        }

        .page {
            margin-top: 2vh;
        }

        .drop-down {
            font-size: 13px;
            margin-left: 5px;
        }
    }

</style>
